<!DOCTYPE html>
<!-- DOCTYPE声明文档类型为HTML5 -->
<html lang="zh-CN">
<!-- html根标签，lang属性定义文档语言 -->
<head>
<!-- head包含文档的元信息 -->
    <meta charset="UTF-8">
    <!-- meta定义字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML标签示例</title>
    <!-- title定义浏览器标签页标题 -->
</head>
<body>
<!-- body包含文档可见内容 -->
    <header>
    <!-- header定义页眉 -->
        <h1>HTML标签示例</h1>
        <!-- h1定义一级标题 -->
        <nav>
        <!-- nav定义导航链接 -->
            <ul>
            <!-- ul定义无序列表 -->
                <li><a href="#section1">第一部分</a></li>
                <!-- li定义列表项，a定义超链接 -->
                <li><a href="#section2">第二部分</a></li>
            </ul>
        </nav>
    </header>

    <main>
    <!-- main定义文档主要内容 -->
        <article id="section1">
        <!-- article定义独立内容块 -->
            <h2>第一部分</h2>
            <!-- h2定义二级标题 -->
            <p>这是一个段落，使用p标签。</p>
            <!-- p定义段落 -->
            <img src="images/a.png" alt="示例图片" width="200">
            <!-- img嵌入图片 -->
        </article>

        <section id="section2">
        <!-- section定义文档中的节 -->
            <h2>第二部分</h2>
            <div>
            <!-- div定义文档分区 -->
                <p>这是一个div中的段落。</p>
                <span>这是一个span元素。</span>
                <!-- span定义行内元素 -->
            </div>
            <table border="1">
            <!-- table定义表格 -->
                <tr>
                <!-- tr定义表格行 -->
                    <th>表头1</th>
                    <!-- th定义表头单元格 -->
                    <th>表头2</th>
                </tr>
                <tr>
                    <td>数据1</td>
                    <!-- td定义标准单元格 -->
                    <td>数据2</td>
                </tr>
            </table>
        </section>

        <aside>
        <!-- aside定义侧边栏内容 -->
            <h3>相关链接</h3>
            <ol>
            <!-- ol定义有序列表 -->
                <li><a href="demo01.html">示例1</a></li>
                <li><a href="demo02.html">示例2</a></li>
            </ol>
        </aside>
    </main>

    <footer>
    <!-- footer定义页脚 -->
        <p>© 2023 HTML示例</p>
        <address>
        <!-- address定义联系信息 -->
            联系方式: example@example.com
        </address>
    </footer>

    <form>
    <!-- form定义表单 -->
        <fieldset>
        <!-- fieldset分组表单元素 -->
            <legend>个人信息</legend>
            <!-- legend定义fieldset标题 -->
            <label for="name">姓名:</label>
            <!-- label定义表单标签 -->
            <input type="text" id="name" name="name">
            <!-- input定义输入字段 -->
            <br>
            <!-- br定义换行 -->
            <label for="email">密码:</label>
            <input type="password" id="email" name="email">
            <br>
            <button type="submit">提交</button>
            <!-- button定义可点击按钮 -->
        </fieldset>
    </form>
</body>
</html>